<template>
  <div>
    <ButtonGroup
      v-if="!isEdit"
      :options="clueButtons"
      style="margin-bottom: 20px"
      @click="handleButtonClick"
    />
    <p-table
      class="table-list-container"
      row-key="id"
      :columns="columns"
      :pagination="false"
      :scroll="{ y: 350 }"
      bordered
      :data-source="selectFollowMatter"
      :row-selection="rowSelectionMixin"
      @change="handleTableChange"
    >
      <a
        slot="topic"
        slot-scope="text, record"
        @click="handleNumberClick(record)"
      >
        {{ text }}
      </a>
    </p-table>
    <!-- <DialogVisitBusinessList
      :visible.sync="visibleVisit"
      @change="changeVisit"
    /> -->
  </div>
</template>

<script>
import mixinTable from '@/mixins/mixin-table.js';
import { postDeleteMatter } from '@/api/visit.js';

export default {
  components: {},
  mixins: [mixinTable],
  props: {
    selectFollowMatter: {
      type: Array,
      default: () => [],
    },
    followMatterKeys: {
      type: Array,
      default: () => [],
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visibleVisit: false,
    };
  },
  computed: {
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '跟进事项名称',
          dataIndex: 'topic',
          scopedSlots: { customRender: 'topic' },
          ellipsis: true,
        },
        {
          align: 'center',
          title: '状态',
          dataIndex: 'state',
          customRender: (text) => (text === '0' ? '待处理' : '已处理'),
          ellipsis: true,
        },
        {
          align: 'center',
          title: '负责人姓名',
          dataIndex: 'currentUserName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '负责人部门',
          dataIndex: 'currentDepartmentName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '负责人联系号码',
          dataIndex: 'tel',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建人',
          dataIndex: 'createUserName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '处理时间',
          dataIndex: 'currentMatterTime',
          ellipsis: true,
        },
      ];
      return columns;
    },
    clueButtons() {
      const disabled = !this.rowSelectionMixin.selectedRowKeys.length;
      return [
        {
          key: 'followMatterAdd',
          type: 'primary',
          label: '新增',
          icon: 'plus',
          authKey: '',
        },
        {
          key: 'followMatterDelete',
          label: '删除',
          icon: 'delete',
          authKey: '',
          disabled,
        },
      ];
    },
  },
  watch: {
    selectFollowMatter: {
      handler(val) {
        this.rowSelectionMixin.selectedRowKeys = [];
      },
      deep: true,
    },
  },

  methods: {
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    followMatterAddCallback() {
      this.$emit('add-follow-matter');
    },
    handleNumberClick(record) {
      this.$emit('detail-matter', record);
    },
    followMatterDeleteCallback() {
      const ids = this.rowSelectionMixin.selectedRowKeys;
      this.$confirm(`该操作将删除 ${ids.length} 条数据，是否确认？`)
        .then(async () => {
          const result = await postDeleteMatter(ids);
          if (result.data.code === 0) {
            this.$message.success('删除成功');
            this.$emit('refresh-follow-matter');
          }

          // const diff = this.followMatterKeys.filter(
          //   (key) => !ids.includes(key)
          // );
          // this.$emit('update:followMatterKeys', diff);
          // ids.forEach((id) => {
          //   const index = this.selectFollowMatter.findIndex(
          //     (item) => item.id === id
          //   );
          //   this.selectFollowMatter.splice(index, 1);
          // });
          this.rowSelectionMixin.selectedRowKeys = [];
        })
        .catch(() => {
          // console.log('e: ', e);
        });
    },
  },
};
</script>
